<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Aigis单位随机器Demo</title>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
        <script src="http://libs.baidu.com/jquery/2.1.1/jquery.js"></script>
        <script src="https://vuejs.org/js/vue.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        
        <!-- a.wheel-button: old: get href attr; new: get bindwheel attr. -->
        <script src="http://t.zyr17.cn/js/jquery.wheelmenu.js"></script>
        
        <script src="aigisRandomer.js"></script>
        <link rel="stylesheet" href="aigisRandomer.css">
    </head>
    <body>
        <div id="bodydiv">
            <div id="navidiv">
                <div id="rarediv">
                    <customdropdown title="稀有度" :chosenindex.sync="navi.rareSelected" :texts="navi.rareArray"></customdropdown>
                </div>
                <div id="positiondiv">
                    <customdropdown title="位置" :chosenindex.sync="navi.positionSelected" :texts="navi.positionArray"></customdropdown>
                </div>
                <div id="chosendiv">
                    <customdropdown title="已选" :chosenindex.sync="navi.chosenSelected" :texts="navi.chosenArray"></customdropdown>
                </div>
                <div id="costdiv">
                    <customdropdown title="COST" :chosenindex.sync="navi.costSelected" :texts="navi.costArray"></customdropdown>
                </div>
                <div id="sortdiv">
                    <customdropdown title="排序方式" :chosenindex.sync="navi.sortSelected" :texts="navi.sortArray"></customdropdown>
                </div>
                <div id="searchdiv" class="input-group">
                    <input type="text" id="searchinput" class="form-control" v-model="navi.searchText">
                    <span class="input-group-btn">
                        <button id="searchbutton" class="btn btn-default" type="button">搜索</button>
                    </span>
                </div>
            </div>
            <div id="navipadding"></div>
            <div id="unitlistdiv">
                <div v-if="showwelcome" style="display: flex; flex-direction: column;">
                    <div style="display: flex; justify-content: center; flex: none;">
                        <span style="margin: 10px; flex: none; font-size: 30px; font-weight: bold;">
                            数据载入中...(实际上应该是使用说明)
                        </span>
                    </div>
                    <div style="flex: none; display: flex; justify-content: center;">
                        <span style="flex: none;">
                            <input id="notwelcome" type="checkbox">自动跳过
                        </span>
                        <button id="initbutton" type="button" disabled>数据载入中...</button>
                    </div>
                </div>
                <unitlist ref="unitlist" v-if="!showwelcome" :unitdata="unitlistunitdata"></unitlist>
            </div>
            <div id="footerdiv">
                <button type="button" class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#randommodal">随机</button>
                <button type="button" class="btn btn-default" id="savedata" href="javascript:void(0)" data-toggle="modal" data-target="#savemodal">保存</button>
                <button type="button" class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#loadmodal">加载</button>
            </div>
            <div id="footerpadding"></div>
            <div class="modal fade" id="savemodal" tabindex="-1" role="dialog" aria-labelledby="savemodallabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="savemodallabel">请保存下面的数据</h4>
                        </div>
                        <div class="modal-body">
                            <textarea id="savemodaltextarea" readonly="readonly" onclick="this.focus();this.select();"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="loadmodal" tabindex="-1" role="dialog" aria-labelledby="loadmodallabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="loadmodallabel">请填入保存的数据</h4>
                        </div>
                        <div class="modal-body">
                            <textarea id="loadmodaltextarea"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button id="loadmodalbutton" type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="randommodal" tabindex="-1" role="dialog" aria-labelledby="randommodallabel" aria-hidden="true">
                <div class="modal-dialog" style="width: 90%;">
                    <div class="modal-content">
                        <div class="modal-body">
                            <h3><input type="checkbox" id="randomincludecheckbox" value="#randomincludediv" v-model="random.include.enabled"><label for="randomincludecheckbox">从满足以下规则的单位中选择</label></h3>
                        </div>
                        <div class="modal-body" id="randomincludediv">
                            <checkboxlist :texts="random.include.rareArray" :selects.sync="random.include.rareSelected"></checkboxlist>
                            <checkboxlist :texts="random.include.positionArray" :selects.sync="random.include.positionSelected"></checkboxlist>
                        </div>
                        <div class="modal-body">
                            <h3><input type="checkbox" id="randomexcludecheckbox" value="#randomexcludediv" v-model="random.exclude.enabled"><label for="randomexcludecheckbox">排除满足以下规则的单位</label></h3>
                        </div>
                        <div class="modal-body" id="randomexcludediv">
                            <checkboxlist :texts="random.exclude.rareArray" :selects.sync="random.exclude.rareSelected"></checkboxlist>
                            <checkboxlist :texts="random.exclude.positionArray" :selects.sync="random.exclude.positionSelected"></checkboxlist>
                        </div>
                        <div class="modal-body">
                            <h3><input type="checkbox" id="randomrulecheckbox" value="#randomrulediv" v-model="random.rule.enabled"><label for="randomrulecheckbox">队伍编成需要满足的条件</label></h3>
                        </div>
                        <div class="modal-body" id="randomrulediv" style="display: flex">
                            <div id="randomclosenumdiv">
                                <customdropdown title="近战数量：最少" :chosenindex.sync="random.rule.closeNumber.min" :texts="zeroToFifteen"></customdropdown>
                                <customdropdown title="最多" :chosenindex.sync="random.rule.closeNumber.max" :texts="zeroToFifteen"></customdropdown>
                            </div>
                            <div id="randomfarnumdiv">
                                <customdropdown title="远程数量：最少" :chosenindex.sync="random.rule.farNumber.min" :texts="zeroToFifteen"></customdropdown>
                                <customdropdown title="最多" :chosenindex.sync="random.rule.farNumber.max" :texts="zeroToFifteen"></customdropdown>
                            </div>
                            <div id="randomcostavgdiv">
                                <span>平均COST：最低 </span>
                                <input type="text" class="form-control random-limit-min" id="randommincostinput" v-model="random.rule.averageCost.min">
                                <span> 最高 </span>
                                <input type="text" class="form-control random-limit-max" id="randommaxcostinput" v-model="random.rule.averageCost.max">
                            </div>
                        </div>
                        <div class="modal-body" style="display: none;">
                            <h3><input type="checkbox" value="#rulegroupdiv">选择预编队伍概率</h3>
                        </div>
                        <div class="modal-body" id="rulegroupdiv" style="display: none">
                            选择预编队伍概率
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button id="randommodalresultbutton" type="button" class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#randomresultmodal">随机</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="randomresultmodal" tabindex="-1" role="dialog" aria-labelledby="randomresultmodallabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="randomresultmodallabel">随机结果</h4>
                        </div>
                        <div class="modal-body">
                            <randomresult :unitdata="randomresultunitdata"></randomresult>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>

            bodyVue = new Vue({
                el: '#bodydiv',
                data: {
                    zeroToFifteen: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                    navi: {
                        rareArray: ['全部', '蓝', '黑', '白', '金', '银', '铜', '铁'],
                        positionArray: ['全部', '近战', '远程'],
                        chosenArray: ['全部', '已选', '未选'],
                        costArray: ['全部', '低(0-15)', '中(16-25)', '高(26-?)'],
                        sortArray: ['默认', '稀有度', '职业', 'COST'],
                        rareSelected: undefined,
                        positionSelected: undefined,
                        chosenSelected: undefined,
                        costSelected: undefined,
                        sortSelected: undefined,
                        searchText: ''
                    },
                    random: {
                        include: {
                            enabled: true,
                            rareArray: ['铁', '铜', '银', '金', '白', '黑', '蓝'],
                            rareSelected: [true, true, true, true, true, true, true],
                            positionArray: ['近战', '远程'],
                            positionSelected: [true, true]
                        },
                        exclude: {
                            enabled: true,
                            rareArray: ['铁', '铜', '银', '金', '白', '黑', '蓝'],
                            rareSelected: [false, false, false, false, false, false, false],
                            positionArray: ['近战', '远程'],
                            positionSelected: [false, false]
                        },
                        rule: {
                            enabled: true,
                            closeNumber: {
                                min: 0,
                                max: 10
                            },
                            farNumber: {
                                min: 0,
                                max: 10
                            },
                            averageCost: {
                                min: 12,
                                max: 22
                            }
                        }
                    },
                    unitlistunitdata: [],
                    randomresultunitdata: [],
                    showwelcome: true
                }
            });

            //show/hide div when click title in random-modal
            $('#randommodal .modal-body > h3 > input').click(function () {
                var divid = $(this).attr('value');
                if ($(this).prop('checked'))
                    $(divid).css('display', '');
                else $(divid).css('display', 'none');
            });

            // start random
            $('#randommodalresultbutton').click(function () {
                if (!randomUnitListUpdate('randomresultunitdata')) {
                    // random failed
                }
            });

            //when scroll, close all wheel menu
            $(window).scroll(function () {
                $('.wheel.active').mouseleave();
            });

            //show unitlist
            $('#initbutton').click(function () {
                unitListUpdate('#unitlistdiv');
            });

            //save not welcome flag in localstorage
            $('#notwelcome').click(function () {
                if ($(this).prop('checked'))
                    localStorage['notwelcome'] = 'true';
                else
                    localStorage.removeItem('notwelcome');
            });

            //get notwelcome flag
            if (localStorage.notwelcome != undefined) {
                $('#notwelcome').prop('checked', true);
            }
            /*
                    //change selected when navi dropdown clicked
                    $('#navidiv ul.dropdown-menu li a').click(function () {
                        $(this).parents('.btn-group').find('button .navichosen').text($(this).text());
                    });

                    //change selected when random dropdown clicked
                    $('#randommodal ul.dropdown-menu li a').click(function () {
                        $(this).parents('.btn-group').find('button .randomchosen').text($(this).text());
                    });
            */
            //change selected specially for #costdiv
            $('#navidiv #costdiv ul li a').click(function () {
                $(this).parents('.btn-group').find('button span:not(.caret)').text($(this).text() != '全部' ? $(this).text()[0] : '全部');
            });

            //update unitlist
            $('#searchbutton').click(function () {
                //unitlistvue = unitlistupdate(unitlistvue, '#unitlistdiv');
                unitListUpdate('#unitlistdiv');
            });

            $('#footer .wheel-button').wheelmenu({ animation: "fade", animationSpeed: "fast", trigger: "hover" });

            //savedata button, set save textarea texts
            $('button#savedata').click(function () {
                $('#savemodaltextarea').val(JSON.stringify(localStorage));
            });

            //loaddata button
            $('#loadmodalbutton').click(function () {
                try {
                    var data = JSON.parse($('#loadmodaltextarea').val());
                    if (Object.keys(data).length == 0) {
                        alert('空数据！不载了！');
                        return;
                    }
                    localStorage.clear();
                    for (var i in data)
                        localStorage[i] = data[i];
                    alert('导入成功！为更新数据将刷新网页！');
                    location.reload();
                }
                catch (err) {
                    alert('载入错误！可在控制台查看错误信息。');
                    console.log(err);
                }
            });

            //randomresultimgvue = new Vue({el: '#randomresultimgdiv', data: { unitdata: [] }});

            loadDataJson('unitdata.json');
        </script>
    </body>
</html>
